import { useState,useEffect } from "react";
import Dialog from "./Dialog";
import Table from "./Table";
import "./index.scss";
import DB from './Db'
import { find } from "lodash";

const App = () => {
  useEffect(()=>{
    find().then(res => {
      setSearch()
    })
  })
  const [search, setSearch] = useState("");
  const [tableData, setTableData] = useState("");
  const [formData, setFormData] = useState({
    http: "",
    username: "",
    password: "",
    mark: "",
    name: [value],
  });
  //控制弹窗是否显示
  const [vieible, setVisible] = useState(true);
  //把表单里的数据插入到表格数据里去
  const pushTable = (flag, data) => {
    setVisible(state);
    //对表单的数据进行校验
    //通过校验以后走接口向服务端请求
    // 接口返回成功后
    setTableData([...tableData,{ ...data }])
  };
  return (
    <div className="dialog">
      {vieible && <Dialog formData={formData} setVisible={setVisible} pushTable={pushTable}></Dialog>}
      {/* 搜索+添加操作 */}
      <header>
        <input type="text" placeholder="搜索密码" />
        <button>添加记录</button>
      </header>
      {/* 表格:修改和删除操作 */}
      <Table data={tableData}></Table>
    </div>
  );
};
export default App;

